<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.businessCode || '系统自动生成' }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-common-status :status="ruleForm.auditState"></jk-common-status>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-button type="warning" icon="el-icon-document-copy" size="small" class="item-gap" @click="onCopyBtn">复制</jk-button>
					<jk-save-button v-if="pageType === 'add'" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<jk-update-button v-if="pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :permission-prefix="prefix" :loading="saveBtnLoading" class="item-gap" @click="onConfirmBtn(1)"></jk-update-button>
					<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>
					<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">{{ ruleForm.id ? '更新' : '保存' }}并审核</jk-button></div>
					<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '审核': '撤销审核' }}</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="120px" :show-message="false">
				<div ref="box3">
					<div class="flex-between-center margin-bottom-10">
						<el-tag type="primary" effect="plain">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
					</div>
					<el-row ref="box1">
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="用户工艺编号">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.code || '' }}</span>
								<el-input v-else v-model.trim="ruleForm.code" clearable style="width: 100%;" placeholder="用户工艺编号" />
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="品种名称" prop="productId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productName }}</span>
								<remote-search-product-input
									v-else
									placeholder="品种名称"
									only-key="productId"
									query-name="productName"
									:form-data="ruleForm"
									@on-select="onSelectProductChange"
								></remote-search-product-input>
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="批号" prop="batchCode">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.batchCode }}</span>
								<remote-search-batch-code-input
									v-else
									:disabled="!ruleForm.productId"
									placeholder="批号"
									only-key="batchCodeId"
									query-name="batchCode"
									:form-data="ruleForm"
									@on-select="onSelectBatchCodeChange"
								></remote-search-batch-code-input>
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="纺纱方式" prop="spinTypeId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spinTypeName }}</span>
								<jk-select v-else v-model="ruleForm.spinTypeId" :disabled="!!ruleForm.productSpinTypeId" :option-list="spinTypeList" size="medium" placeholder="纺纱方式" clearable class="width-100-percent" @change="onSpinTypeChange"></jk-select>
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="工序" prop="processId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.processName }}</span>
								<el-select v-else v-model="ruleForm.processId" placeholder="工序" clearable class="width-100-percent" @change="onProcessChange">
									<el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="单据日期" prop="specDate">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specDate }}</span>
								<el-date-picker v-else v-model="ruleForm.specDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="单据日期" />
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="工艺员" prop="specEmpId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specEmpName }}</span>
								<remote-search-emp-input
									v-else
									placeholder="工艺员"
									only-key="specEmpId"
									query-name="specEmpName"
									:form-data="ruleForm"
									@on-select="onSelectEmpChange"
								></remote-search-emp-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div ref="box2">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-paperclip item-gap"></span>
						<span>工艺信息</span>
					</el-tag>
					<el-row>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="设备机型" prop="machineModelId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.machineModelName }}</span>
								<el-select v-else v-model="ruleForm.machineModelId" placeholder="设备机型" clearable class="width-100-percent" @change="onProcessChange">
									<el-option v-for="item in machineModelList" :key="item.id" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="台日单产" prop="dailyYield1">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.dailyYield }}</span>
								<jk-number-input v-else v-model="ruleForm.dailyYield" placeholder="台日单产" />
							</el-form-item>
						</el-col>
						<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="公定回潮率%">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.moistureRegain }}</span>
								<jk-number-input v-else v-model="ruleForm.moistureRegain" placeholder="公定回潮率%" />
							</el-form-item>
						</el-col>
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="运转效率%">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.efficiencyPercent }}</span>
								<jk-number-input v-else v-model="ruleForm.efficiencyPercent" :max="100" placeholder="运转效率%" />
							</el-form-item>
						</el-col>-->
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="定量(g/m)">
								<div class="flex-start">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.gramWeight }}</span>
									<jk-number-input v-else v-model="ruleForm.gramWeight" :disabled="!!ruleForm.specSheetId" style="width: 100%;" placeholder="克重" />
									<span>~</span>
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.meters }}</span>
									<jk-number-input v-else v-model="ruleForm.meters" :disabled="!!ruleForm.specSheetId" style="width: 100%;" placeholder="米长" />
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<el-tag type="primary" effect="plain" class="margin-bottom-10">
					<span class="el-icon-notebook-2 item-gap"></span>
					<span>工艺项目</span>
				</el-tag>
				<el-row>
					<el-col :span="24">
						<jk-table ref="jkTable" :loading="tableLoading" :data="tableData" border :height="500" style="width: 100%">
							<vxe-table-column type="seq" title="序号" width="70" align="center" />
							<vxe-table-column field="specParamName" title="工艺项目" :width="140"></vxe-table-column>
							<vxe-table-column field="val" title="标准值" align="right" :width="120">
								<template #header>
									<batchSetPopover
										placeholder="标准值"
										@on-confirm="onConfirmBtnOfBatchPopover($event, 'val')"
									></batchSetPopover>
								</template>
								<template slot-scope="scope">
									<span v-if="pageType === 'detail'">{{ scope.row.val }}</span>
									<div v-else>
										<jk-number-input v-if="scope.row.dataType === 1" v-model="scope.row.val" size="mini" @keydown.enter.native="handleKeyDown" @change="onErrPerChange($event, scope)"></jk-number-input>
										<jk-input v-else v-model="scope.row.val" size="mini" placeholder="" @keydown.enter.native="handleKeyDown"></jk-input>
									</div>
								</template>
							</vxe-table-column>
							<vxe-table-column field="valMin" title="误差(%)" align="right" :width="120">
								<template slot-scope="scope">
									<span v-if="pageType === 'detail'">{{ scope.row.plusOrMinus }}</span>
									<div v-else>
										<span v-if="!scope.row.val">{{ scope.row.plusOrMinus }}</span>
										<jk-number-input v-else v-model="scope.row.plusOrMinus" :disabled="!scope.row.val" size="mini" @keydown.enter.native="handleKeyDown" @change="onErrPerChange($event, scope)"></jk-number-input>
									</div>
								</template>
							</vxe-table-column>
							<vxe-table-column field="valMin" title="下限值" align="right" :width="120">
								<template #header>
									<batchSetPopover
										placeholder="下限值"
										@on-confirm="onConfirmBtnOfBatchPopover($event, 'valMin')"
									></batchSetPopover>
								</template>
								<template slot-scope="scope">
									<span v-if="pageType === 'detail'">{{ scope.row.valMin }}</span>
									<div v-else>
										<jk-number-input v-if="scope.row.dataType === 1" v-model="scope.row.valMin" size="mini" @keydown.enter.native="handleKeyDown"></jk-number-input>
										<jk-input v-else v-model="scope.row.valMin" size="mini" placeholder="" @keydown.enter.native="handleKeyDown"></jk-input>
									</div>
								</template>
							</vxe-table-column>
							<vxe-table-column field="valMax" title="上限值" align="right" :width="120">
								<template #header>
									<batchSetPopover
										placeholder="上限值"
										@on-confirm="onConfirmBtnOfBatchPopover($event, 'valMax')"
									></batchSetPopover>
								</template>
								<template slot-scope="scope">
									<span v-if="pageType === 'detail'">{{ scope.row.valMax }}</span>
									<div v-else>
										<jk-number-input v-if="scope.row.dataType === 1" v-model="scope.row.valMax" size="mini" @keydown.enter.native="handleKeyDown"></jk-number-input>
										<jk-input v-else v-model="scope.row.valMax" size="mini" placeholder="" @keydown.enter.native="handleKeyDown"></jk-input>
									</div>
								</template>
							</vxe-table-column>
							<!--<vxe-table-column field="paramType" title="项目类型" :width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.paramsType === 1 ? '设备工艺' : '运转工艺' }}
								</template>
							</vxe-table-column>
							<vxe-table-column field="ifNull" title="是否为空" :width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.ifNull ? '是' : '否' }}
								</template>
							</vxe-table-column>
							<vxe-table-column field="ifBusi" title="是否翻改项目" :width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.ifBusi ? '是' : '否' }}
								</template>
							</vxe-table-column>
							<vxe-table-column field="dataType" title="数据类型" :width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.dataType === 1 ? '数字' : '字符' }}
								</template>
							</vxe-table-column>-->
						</jk-table>
					</el-col>
				</el-row>
			</el-form>
		</jk-card>
	</jk-view>
</template>

<script>
    import technologyOrder from './form-box-mixin';
    export default {
        name: 'TechnologyOrder',
        mixins: [technologyOrder],
        data() {
            return {};
        },
        methods: {

        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
</style>
